<template>
  <div class="search">
    <div class="search-box">
      <img src="" alt="">
      <input type="text" placeholder="搜索歌曲、歌手" v-model="keywords" v-throttle="search">
      <div class="search-right" v-show="keywords !==''" @click.stop="clickClear">
        <img src="" alt="">
      </div>
    </div>
    <div class="search-suggest" v-show="keywords !== ''">
      <ScrollView>
        <ul>
          <li v-for="(song,index) in songs" :key="song.id" @click.stop="selectMusic(song.id,song.name,song.artists[0].name)">
            <img src="" alt="">
            <p>{{song.name}} - {{song.artists[0].name}}</p>
          </li>
        </ul>
      </ScrollView>
    </div>
    <div class="search-hot">
      <h3>热门搜索</h3>
        <ul>
          <li v-for="(item,index) in hotSongs" :key="index" @click.stop="clickSearch(item.first)">{{item.first}}</li>
        </ul>
    </div>
    <div class="search-history">
      <h3>搜索历史</h3>
      <ul>
        <li v-for="(item,index) in historySong" :key="index" @click.stop="clickSearch(item)">
          <div class="history-left">
            <img src="" alt="">
            <p>{{ item }}</p>
          </div>
          <div class="history-right" @click.stop="delHistorySong(index)">
            <img src="" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import ScrollView from '../components/ScrollView'
import { mapActions } from 'vuex'
import { setLocalStorage, getLocalStorage } from '../tools/tools'
import {getSearchList,getHotSearch} from '../api/index'
import MetaInfo from '../../vue.meta.info'


export default {
  name: 'Search',
  metaInfo:MetaInfo.search,

  components: {
    ScrollView
  },
  data () {
    return {
      keywords:'',
      songs:[],
      hotSongs:[],
      historySong:[]
    }
  },
  directives: {
    throttle: {
      // 指令的定义 - 函数节流
      inserted: function (el, obj) {
        let timerId = null
        let flag = true
        el.addEventListener('input', function () {
          if (!flag) return
          flag = false
          timerId && clearTimeout(timerId)
          timerId = setTimeout(function () {
            flag = true
            obj.value()
          }, 1000)
        })
      }
    }
  },
  methods: {
    ...mapActions([
      'setFullScreen',
      'getSongDetail'
    ]),
    async search(value = this.keywords){
      // console.log('发送请求');
      if(this.keywords === '') return
      const searchList = await getSearchList({keywords:value})
      this.songs = searchList.result.songs
      // console.log(this.songs);
    },
    selectMusic(id,song){
      this.keywords = ''
      this.setFullScreen(true)
      this.getSongDetail([id])
      if(this.historySong.includes(this.keywords)){
        return
      }
      this.historySong.unshift(song)
      setLocalStorage('historySong',this.historySong)
    },
    clickSearch(value){
      this.keywords = value
      this.search(value)

    },
    clickClear(){
      this.keywords = ''
    },
    delHistorySong(index){
      this.historySong.splice(index,1)
      setLocalStorage('historySong',this.historySong)
    },
  },
  async created() {
    const hotSearch = await getHotSearch()
    // console.log(hotSearch.result.hots);
    this.hotSongs = hotSearch.result.hots
    //历史搜索
    if(getLocalStorage('historySong') === undefined ||getLocalStorage('historySong') === null) return
    this.historySong = getLocalStorage('historySong')
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/variable";
@import "../assets/css/mixin";
.search{
  position: fixed;
  left: 0;
  right: 0;
  top: 184px;
  bottom: 0;
  @include bg_sub_color();
  .search-box{
    display: flex;
    align-items: center;
    margin: 40px 20px;
    background: #ebecec;
    border-radius: 30px;
    border-bottom: 1px solid #ccc;
    position: relative;
    /*height: 60px;*/
    img{
      width: 40px;
      height: 40px;
      margin-left: 20px;
    }
    input{
      border: none;
      outline: none;
      background: transparent;
      @include font_size($font_medium);
      height: 60px;
      margin-left: 20px;
    }
    .search-right{
      position: absolute;
      right: 20px;
      img{
        width: 30px;
      }
    }
  }
  .search-suggest{
    position: fixed;
    left: 0;
    right: 0;
    top: 300px;
    bottom: 0;
    overflow: hidden;
    @include bg_sub_color();
    li{
      display: flex;
      align-items: center;
      padding: 20px 40px;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      @include no-wrap();
      img{
        width: 40px;
        height: 40px;
      }
      p{
        margin-left: 20px;
        @include font_color();
        @include font_size($font_medium);
      }
    }
  }
  .search-hot{
    h3{
      @include font_color();
      @include font_size($font_medium);
      padding: 10px 20px;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        height: 60px;
        line-height: 60px;
        border: 1px solid #000;
        border-radius: 30px;
        padding: 0 20px;
        @include font_color();
        @include font_size($font_medium_s);
        @include border_color();
        margin: 10px 20px;
      }
    }
  }
  .search-history{
    h3{
      @include font_color();
      @include font_size($font_medium);
      padding: 10px 20px;
    }
    margin-top: 20px;
    li{
      padding: 20px 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      .history-left{
        display: flex;
        align-items: center;
        img{
          width: 40px;
          height: 40px;
        }
        p{
          margin-left: 20px;
          @include font_color();
          @include font_size($font_medium_s);
        }
      }
      .history-right{
        img{
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>
